<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    /* ################################### */
    .loading-indicator {
      z-index: 9999;
      width: 70px;
      margin: 10px auto;
      text-align: center;
    }

    .loading-indicator .loader-dot {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-color: #8c8c8c;
      border-radius: 100%;
      -webkit-animation: bouncedelay 1.4s ease-in-out infinite;
      animation: bouncedelay 1.4s ease-in-out infinite;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

    .loading-indicator .loader-dot:first-child {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }

    .loading-indicator .loader-dot:nth-child(2) {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }

    @keyframes bouncedelay {

      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
        /* transform: scale(0); */
      }

      40% {
        -webkit-transform: scale(1);
        /* transform: scale(1); */
      }
    }
  </style>
</head>

<body>
  <div class="loading-indicator">
    <span class="loader-dot"></span>
    <span class="loader-dot"></span>
    <span class="loader-dot"></span>
  </div>

</body>

</html>